<!-- 产品列表 -->
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style type="text/css">
*{margin: 0px; padding: 0px;}

.produtListWrap{width: 990px; overflow: hidden; margin: 100px auto;}
.produtListWrap ul{width: 1000px;}
.produtListWrap li{width: 240px; margin:0 10px 10px 0;padding-bottom: 50px; box-sizing: border-box; border: 1px solid #ccc;position: relative; float: left;}
.produtListWrap li img{display: block; width: 240px; height: 240px;}
.produtListWrap li p{line-height: 25px; font-size: 14px; padding: 0 10px;}
.produtListWrap li .buyBtn{width: 80px; height: 40px; line-height: 40px; text-align: center; position:absolute; right: 10px; bottom: 10px; text-decoration: none; border-radius: 5px; background-color: #ccc; color: #fff; }
.produtListWrap li .canBuy{background-color: #f00;}

.clearfix:after { visibility: hidden;display: block;font-size: 0;content: " ";clear: both;height: 0;}/* IE 6/7 */
.clearfix { zoom: 1;} 

</style>
</head>
<body>


<script src="js/jQuery.js"></script>
<script type="text/javascript" src="js/handlebars-v3.0.3.js"></script>
<script src="js/mock.js"></script>
<script type="text/javascript" src="js/data.js"></script>

<div class="produtListWrap">
	<h3>商品列表</h3>
	<ul class="clearfix" id="produtList">	</ul>
</div>

<script type="text/javascript">
// 根据参入参数显示对应的值
Handlebars.registerHelper('statusFn', function(status,options) {
	if(status){
		return new Handlebars.SafeString('<a class="buyBtn canBuy" href="javascript:;">购买</a>')
	}else{
		return new Handlebars.SafeString('<a class="buyBtn notBuy" href="javascript:;">售罄</a>')
	}
	
});
</script>

<!-- 渲染模板 -->
<script id="nav-template" type="text/x-handlebars-template">
	{{#each this}}
		<li>
			<img src="" />
			<p>产品名称:{{ctitle}}</p>
			<p>价格：&yen;{{price}}</p>
			{{statusFn status}}
		</li>
	{{/each}}
</script>

<script type="text/javascript">
var source   = $("#nav-template").html();//获取模板
var template = Handlebars.compile(source);//预编译模板

$.ajax({
    url: 'http://produtList.cn',
    dataType:'json',
    success:function(data){
    	$("#produtList").html(template(data.data));
    }
    
})

</script>
</body>
</html>
